<template>
  <div class="app-container">
    <!-- 查詢和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.goodsId"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="請輸入商品ID"
      />
      <el-input
        v-model="listQuery.goodsSn"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="請輸入商品編號"
      />
      <el-input
        v-model="listQuery.name"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="請輸入商品名稱"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
      <el-button
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >導出</el-button>
    </div>

    <!-- 查詢結果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查詢中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="table-expand">
            <el-form-item label="商品貨號">
              <span>{{ props.row.artNo }}</span>
            </el-form-item>
            <el-form-item label="宣傳畫廊">
              <img v-for="pic in props.row.gallery" :key="pic" :src="pic" class="gallery" />
            </el-form-item>
            <el-form-item label="商品介紹">
              <span>{{ props.row.brief }}</span>
            </el-form-item>
            <el-form-item label="商品單位">
              <span>{{ props.row.unit }}</span>
            </el-form-item>
            <!-- <el-form-item label="關鍵字">
              <span>{{ props.row.keywords }}</span>
            </el-form-item> -->
            <el-form-item label="類目ID">
              <span>{{ props.row.categoryId }}</span>
            </el-form-item>
            <el-form-item label="品牌商ID">
              <span>{{ props.row.brandId }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column align="center" label="商品ID" prop="id" />

      <el-table-column align="center" min-width="100" label="名稱" prop="name" />

      <!--<el-table-column align="center" label="副標題" prop="subheading" />-->

      <el-table-column align="center" label="商品貨號" prop="artNo" />

      <el-table-column align="center" property="iconUrl" label="圖片">
        <template slot-scope="scope">
          <img :src="scope.row.picUrl" width="40" />
        </template>
      </el-table-column>

      <el-table-column align="center"  label="pv" prop="pv"></el-table-column>

      <el-table-column align="center" label="詳情" prop="detail">
        <template slot-scope="scope">
          <el-dialog :visible.sync="detailDialogVisible" title="商品詳情">
            <div class="goods-detail-box" v-html="goodsDetail" />
          </el-dialog>
          <el-button type="primary" size="mini" @click="showDetail(scope.row.detail)">查看</el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="市場售價" prop="counterPrice" /> -->
      <el-table-column align="center" label="庫存" prop="number" />
      <el-table-column align="center" label="當前價格" prop="counterPrice" />

      <!--<el-table-column align="center" label="副標題" prop="subheading" />-->
      <!-- <el-table-column align="center" label="是否推薦" prop="isNew">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isNew ? 'success' : 'error' "
          >{{ scope.row.isNew ? '推荐' : '非推荐' }}</el-tag>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="是否冷凍" prop="isFrozen">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isFrozen ? 'success' : 'error' "
          >{{ scope.row.isFrozen ? '冷凍' : '非冷凍' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否套餐" prop="isSetMeal">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isSetMeal ? 'success' : 'error' "
          >{{ scope.row.isSetMeal ? '套餐' : '非套餐' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否上架" prop="isOnSale">
        <template slot-scope="scope">
          <!-- <el-tag
            :type="scope.row.isOnSale ? 'success' : 'error' "
          >{{ scope.row.isOnSale ? '已上架' : '已下架' }}</el-tag>-->
          <el-switch
            v-model="scope.row.isOnSale"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            @change="changeStatus(scope.row)"
          >></el-switch>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="是否審核" prop="isHot">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isHot"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            @change="changeIsHot(scope.row)"
          >></el-switch>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">編輯</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-tooltip placement="top" content="返回頂部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

  </div>
</template>

<style>
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 100px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.gallery {
  width: 80px;
  margin-right: 10px;
}
.goods-detail-box img {
  width: 100%;
}
</style>

<script>
import { listGoods,detailGoods, detailGoods2,deleteGoods, editGoodsSale } from "@/api/goods";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "GoodsList",
  components: { BackToTop, Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        goodsSn: undefined,
        name: undefined,
        sort: "add_time",
        order: "desc",
      },
      goodsDetail: "",
      detailDialogVisible: false,
      downloadLoading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      listGoods(this.listQuery)
        .then(async (response) => {
          let list2 = response.data.data.list;
          for (let index = 0; index < list2.length; index++) {
            const element = list2[index];
            let response2=await detailGoods2(element.id)
            element['number']  =response2.data.data.products[0].number;
            element['pv']  =response2.data.data.goods.pvValue;
          }
            this.list =list2
     
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCreate() {
      this.$router.push({ path: "/goods/create" });
    },
    handleUpdate(row) {
      this.$router.push({ path: "/goods/edit", query: { id: row.id } });
    },
    showDetail(detail) {
      this.goodsDetail = detail;
      this.detailDialogVisible = true;
    },
    handleDelete(row) {
      deleteGoods(row)
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "刪除成功",
          });
          this.getList();
        })
        .catch((response) => {
          this.$notify.error({
            title: "失敗",
            message: response.data.errmsg,
          });
        });
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        // let list=this.list
        let list2=[]
        this.listQuery['limit']=9999
        this.listQuery['page']=1

        listGoods(this.listQuery)
        .then(async (response) => {
           list2 = response.data.data.list;
          for (let index = 0; index < list2.length; index++) {
            const element = list2[index];
            let response2=  await detailGoods2(element.id)
             element['number']  =response2.data.data.products[0].number;
             element['pv']  =response2.data.data.goods.pvValue;
             element.isFrozen==true?element.isFrozen='是':element.isFrozen='否'
          }
            const tHeader = [
              "商品ID",
              "商品名稱",
              "商品货號",
              "PV",
              "库存",
              "货品價格",
              "折扣售价",
              "是否冷冻商品"
            ];
            const filterVal = [
              "id",
              "name",
              "artNo",
              "pvValue",
              "number",
              "retailPrice",
              "counterPrice",
              "isFrozen"
            ];
            excel.export_json_to_excel2(tHeader, list2, filterVal, "商品信息");
            this.downloadLoading = false;
       
        })
      

      });
    },
    changeStatus: function (row) {
      editGoodsSale({ id: row.id, isOnSale: row.isOnSale })
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "操作成功",
          });
          this.getList();
        })
        .catch((response) => {
          this.$notify.error({
            title: "失敗",
            message: response.data.errmsg,
          });
        });
    },
    changeIsHot: function (row) {
      editGoodsSale({ id: row.id, isHot: row.isHot })
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "操作成功",
          });
          this.getList();
        })
        .catch((response) => {
          this.$notify.error({
            title: "失敗",
            message: response.data.errmsg,
          });
        });
    },
  },
};
</script>
